<template>
  <div id="app">
    <div class="chat-container">
      <!-- 聊天头部 -->
      <header class="chat-header">
        <h1>智能聊天助手</h1>
      </header>
      <!-- 聊天消息列表 -->
      <div class="chat-messages" ref="messageList">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="{ 'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot' }"
          :style="{ animation: 'fadeIn 0.3s ease' }"
        >
          <img
            :src="message.sender === 'user' ? userAvatarBase64 : botAvatarBase64"
            alt="头像"
            class="avatar"
          />
          <div class="message-content">
            {{ message.content }}
          </div>
        </div>
      </div>
      <!-- 输入框和发送按钮 -->
      <div class="chat-input">
        <input
          v-model="inputMessage"
          type="text"
          placeholder="请输入你的问题..."
          @keyup.enter="sendMessage"
          :disabled="isLoading"
        />
        <button @click="sendMessage" :disabled="isLoading">
          {{ isLoading ? '发送中...' : '发送' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      isLoading: false,
      // 这里需要替换为实际的 Base64 编码头像
      userAvatarBase64: '',
      botAvatarBase64: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.inputMessage.trim() === '') return;

      // 添加用户消息到消息列表
      this.messages.push({ sender: 'user', content: this.inputMessage });
      this.inputMessage = '';
      this.isLoading = true;

      // 调用后端接口获取流式数据
      this.fetchStreamData();
    },
    async fetchStreamData() {
      try {
        // 这里替换为你的后端接口地址
        const response = await fetch('YOUR_API_URL', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ message: this.messages[this.messages.length - 1].content })
        });

        if (!response.ok) {
          throw new Error('请求失败');
        }

        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        let botMessage = '';

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          const chunk = decoder.decode(value);
          botMessage += chunk;
        }

        // 添加机器人回复到消息列表
        this.messages.push({ sender: 'bot', content: botMessage });

        this.isLoading = false;
        this.scrollToBottom();
      } catch (error) {
        console.error('请求出错:', error);
        this.isLoading = false;
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const messageList = this.$refs.messageList;
        messageList.scrollTop = messageList.scrollHeight;
      });
    }
  },
  mounted() {
    this.scrollToBottom();
  }
};
</script>

<style scoped>
#app {
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f9fafb;
}

.chat-container {
  width: 800px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  overflow: hidden;
}

.chat-header {
  background-color: #f7fafc;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.chat-header h1 {
  margin: 0;
  font-size: 24px;
  color: #1a202c;
}

.chat-messages {
  height: 600px;
  overflow-y: auto;
  padding: 20px;
}

.user-message,
.bot-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  max-width: 70%;
  word-wrap: break-word;
}

.user-message {
  margin-left: auto;
  flex-direction: row-reverse;
}

.user-message .message-content {
  background-color: #e0f2fe;
  color: #0284c7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-right: 10px;
}

.bot-message .message-content {
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 8px;
  padding: 12px 16px;
  margin-left: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-input {
  display: flex;
  padding: 20px;
  background-color: #f7fafc;
  border-top: 1px solid #e2e8f0;
}

.chat-input input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-right: 16px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-input input:focus {
  border-color: #60a5fa;
}

.chat-input button {
  padding: 12px 24px;
  background-color: #60a5fa;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.chat-input button:hover {
  background-color: #3b82f6;
}

.chat-input button:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>